<template>
    <div>
        <el-dialog
            title="租赁合同租金收款情况"
            :visible.sync="dialogVisible"
            width="1200px"
            class="data-title"
             :close-on-click-modal="false"
        >
            <div style="margin-left: 30px">
                <el-row>
                    <el-col :span="8">
                        <span>累计已收金额(元)：</span>
                        <span>{{form.accumulatedAmountReceived}}</span>
                    </el-col>
                    <el-col :span="8">
                        <span>累计剩余余款(元)：</span>
                        <span>{{form.accumulatedAmountReceivedCount-form.accumulatedAmountReceived}}</span>
                    </el-col>
                </el-row>
                <el-table :data="tableData" align="center">
                    <el-table-column
                        type="index"
                        label="序号"
                        width="60"
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column label="应收日期" align="center" prop="costPeriodStart" width="200">
                        <template slot-scope="scope">{{scope.row.costPeriodStart}}至{{scope.row.costPeriodEnd}}</template>
                    </el-table-column>
                    <el-table-column label="费用周期" width="100" align="center" prop="chargeProjectName">
                        <!--<template slot-scope="scope">{{scope.row.chargeProjectName | dict('charge_project_type')}}</template>-->
                    </el-table-column>
                    <el-table-column label="应收金额(元)" align="center" prop="receivableMoney" width="200"></el-table-column>
                    <el-table-column label="实收金额(元)" align="center" prop="receivableMoney" width="100"></el-table-column>
                    <el-table-column label="结算状态" align="center" prop="payStatus" width="100">
                        <template slot-scope="scope">{{scope.row.payStatus | dict('pay_status')}}</template>
                    </el-table-column>
                </el-table>
            </div>
            <div  style="text-align: right;padding-top: 50px"><el-button type="primary" size="small" @click="dialogVisible=false">关闭</el-button></div>
        </el-dialog>
    </div>
</template>

<script>
    import {showReceivableList} from '../../api/finance-collection-receivable'
    export default {
        name: "show-receivable",
        data(){
            return{
                dialogVisible:false,
                form:{},
                tableData:[],
                accumulatedAmountReceived:''
            }
        },
        methods:{
            show(item){
                this.dialogVisible=true
                setTimeout(() => {
                    if(item){
                        let accumulatedAmountReceived=0
                        this.form = item
                        showReceivableList(item.rentContractId).then(res=>{
                            this.tableData=res.data.data
                            this.tableData.map(data=> {
                                this.accumulatedAmountReceived += data.receivableMoney
                            })
                        })
                        this.accumulatedAmountReceived=accumulatedAmountReceived
                    }
                }, 200)
            }
        }
    }
</script>

<style lang="scss" scoped>
    

    .data-title {
        font-size: 20px;
        font-weight: bold;
        color: $title-color;
        line-height: 50px;
        border-bottom: 1px solid $border-color;
    }
</style>
